<!DOCTYPE html>

<html>
    <head>
        <title>动画效果</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            div{ width:100px;height:100px;background:#ccff33;}
        </style>
    </head>
    <body>
        <button id="but1">开始</button>
        <button id="but2">结束</button>
        <div id="div">TODO write content</div>

        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
//            $("#but1").click(setInterval(function () {
//                $("#div").animate({"width": "100%"}, 1000);
//                $("#div").animate({"height": "588"}, 1000);
//                $("#div").animate({"width": "100"}, 1000);
//                $("#div").animate({"height": "100"}, 1000);
//            }, 4000))
            var tick;
            $("#but1").click(function () {
                tick = setInterval(function () {
                    $("#div").animate({"width": "100%"}, 100);
                    $("#div").animate({"height": "588"}, 100);
                    $("#div").animate({"width": "100"}, 800);
                    $("#div").animate({"height": "100"}, 400);
                }, 1000);
            });
            $("#but2").click(function () {

                clearInterval(tick);
//                $("#div").stop("false", "false");
            }, );
        </script>
    </body>
</html>
